<template>
<div class="rating_page">
  <head-top head-title="历史红包" :go-back='true'></head-top>
  <scroll ref="wrapper" class="scroll_container" :data="expiredList">
    <ul class="hongbao_list_ul">
      <li class="hongbao_list_li" v-for="item in expiredList" :key="item.id">
       <!--注意观察金额表示方式，整数为字体较大，小数位较小，所以把取得的金额由数字类型
        [转为字符串类型]，然后根据小数点进行截取-->
        <section class="list_item">
          <div class="list_item_left">
            <span>¥</span>
            <span>{{String(item.amount).split('.')[0]}}</span>
            <span>.</span>
            <span>{{String(item.amount).split('.')[1]||0}}</span>
            <p>{{item.description_map.sum_condition}}</p>
          </div>
          <div class="list_item_right">
            <h4>{{item.name}}</h4>
            <p>{{item.description_map.validity_periods}}</p>
            <p>{{item.description_map.phone}}</p>
          </div>
        </section>
        <footer class="list_item_footer" v-if="item.limit_map">
          <p>{{item.limit_map.restaurant_flavor_ids}}</p>
        </footer>
        <svg class="expired">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#expired"></use>
        </svg>
      </li>
    </ul>
  </scroll>
  <div class="loading-container">
    <loading v-if="expiredList.lenght"></loading>
  </div>
</div>
</template>

<script type="text/ecmascript-6">
  import headTop from 'src/components/header/head'
  import loading from 'src/components/common/loading/loading'
  import {mapGetters} from 'vuex'
  import scroll from 'components/common/scroll/scroll'
  import {getExpired} from 'src/service/getData'
  export default {
  data(){
  return{
    expiredList: [],
    showLoading:true
  }
   },
   created(){
   },
   mounted(){
     this.initData();
   },
   computed: {
     ...mapGetters ([
       'userInfo'
     ])
   },
   methods: {
    async initData(){
      if(this.userInfo){
        //以下两种方法均可
        /*await getExpired(this.userInfo.user_id).then((res)=>{
          this.expiredList = res;
          // 保证在DOM渲染完毕后初始化better-scroll
          setTimeout(() => {
            this._initScroll()
          }, 20)
        });*/
        this.expiredList=  await getExpired(this.userInfo.user_id);
      }
     }
   },
   components:{
     scroll,
     loading,
     headTop
   }
  }
</script>
<style scoped lang="scss" rel="stylesheet/scss">
  @import '../../../../src/style/mixin';
  .rating_page{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding-top: 1.95rem;
    z-index: 10;
    background-color: #f1f1f1;
    p, span{
      font-family: Helvetica Neue,Tahoma,Arial;
    }
  }
  .scroll_container{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding-top: 1.95rem;
  }
  .hongbao_list_ul{
    padding: 1rem .5rem;
    .hongbao_list_li{
      background: #fff url(../../../images/expired.png) repeat-x ;
      background-size: .5rem .2rem;
      margin-bottom: 0.5rem;
      border-radius: 0.25rem;
      position: relative;
      .list_item{
        @include fj;
        padding: 1rem 0.5rem .8rem;
        .list_item_left{
          font-size: 0;
          border-right: 0.025rem dotted #ccc;
          flex: 1;
          span:nth-of-type(1){
            @include sc(.75rem, #ccc);
            font-weight: bold;
          }
          span:nth-of-type(2){
            @include sc(2rem, #ccc);
          }
          span:nth-of-type(3), span:nth-of-type(4){
            @include sc(1rem, #ccc);
            font-weight: bold;
          }
          p{
            @include sc(0.4rem, #999);
          }
        }
        .list_item_right{
          flex: 2;
          margin-left: 1.5rem;
          h4{
            @include sc(.7rem, #666);
            margin-left: -.7rem;
          }
          p{
            list-style-type: disc;
            margin-left: -.7rem;
            @include sc(.4rem, #999);
          }
        }
      }
      .list_item_footer{
        background-color: #f9f9f9;
        padding: .4rem .4rem;
        border-bottom-left-radius: 0.25rem;
        border-bottom-right-radius: 0.25rem;
        p{
          list-style-type: disc;
          @include sc(.4rem, #999);
          margin-left: .4rem;
        }
      }
      .expired{
        fill: #ddd;
        @include wh(3rem, 3rem);
        top: .6rem;
        right: .2rem;
        position: absolute;
      }
    }
  }
</style>
